<template>
  <form class="information">
    <div class="inf-heading">
      修改信息
    </div>
    <div class="inf-context">
      <div class="inf-change">
        <div class="inf-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 inf-label">用户名:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <input class="inf-text" name="userName" type="text" v-model="username"/>
          </div>
        </div><br>
        <div class="inf-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 inf-label">E-mail:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <input class="inf-text" name="email" type="text" v-model="email"/>
          </div>
        </div><br>
        <div class="inf-group el-row">
          <label class="el-col-xs-6 el-col-sm-4 inf-label">性别:</label>
          <div class="el-col-xs-18 el-col-sm-8">
            <el-radio-group v-model="gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <div class="inf-footer">
      <div class="el-row footer-body">
        <div class="el-col-xs-18 el-col-sm-20 el-col-xs-offset-6 el-col-sm-offset-4">
          <el-button class="footer-button" @click="updata">保存</el-button>
          <button class="goback-button" @click="goBack">返回</button>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
  import {reactive,toRefs} from "vue";
  import router from '@/router'
  import { updataUserInfo } from '@/api/user.js'
import { ElMessage } from 'element-plus';
  export default {
    name: "ChangeInformation",
    setup(){
      let person = reactive({
        id:localStorage.getItem('id'),
        username:'',
        file:'',
        email:'',
        gender: 0,
        zipCode:'315000'
      })
      // 返回
      function goBack(){
        router.replace({path:'/member/index'})
      }
      // 更改信息
      function updata() {
        updataUserInfo(person).then(res =>{
          console.log('=============',res);
          if(res.data.msg == 'success'){
            ElMessage.success('修改信息成功')
            router.replace("/member/Index")
          }
        })
      }
      return {
        ...toRefs(person),
        goBack,
        updata
      }
    }
  }
</script>

<style scoped>
  *{
    font-size: 13px;
    color: #333;
  }
  a{
    text-decoration: none;
    color: #666666;
  }
  ul{
    list-style: none;
    padding-left: 0;
  }
  .information{
    background-color: white;
  }
  .inf-heading{
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .inf-context{
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .inf-change{
    padding: 10px 0;
  }
  .inf-group{
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .inf-label{
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px;
    color: #666666;
  }
  .inf-text{
    width: 100%;
    height: 31px;
    margin-left: 20px;
    background-color: white;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .inf-text:hover{
    box-shadow: 0 2px 10px 5px rgba(64,158,255,0.2);
    border-color: #409EFF;
    cursor: text;
  }
  .inf-e-text{
    width: 100%;
    height: 31px;
    line-height: 31px;
    margin-left: 20px;
    background-color: white;
    font-size: 13px;
  }
  .inf-footer{
    padding: 10px 15px;
  }
  /* 性别选项栏 */
  .el-radio-group{
    margin-top: 10px;
    margin-left: 20px;
  }
  .footer-body{
    padding-left: 10px;
    padding-right: 10px;
  }
  .footer-button{
    opacity: 0.8;
    margin-right: 10px;
    line-height: 35px;
    padding: 0 20px;
    color: white;
    border: none;
    background: -webkit-linear-gradient(left, #409EFF, plum);
    border-radius: 4px;
  }
  .footer-button:hover{
    cursor: pointer;
  }
  .goback-button{
    line-height: 35px;
    padding: 0 20px;
    background-color: white;
    border-radius: 4px;
    border: 1px #d8d8d8 solid;
  }
  .goback-button:hover{
    cursor: pointer;
  }
</style>